<template>
     <el-form  
        ref="productCateForm" 
        :model="value"  
        label-width="150px" 
        style="width:600px;">

          <el-form-item label="赠送积分" prop="giftScore">
              <el-input v-model="value.giftScore"></el-input>
          </el-form-item> 

          <el-form-item label="赠送成长值" prop="giftGrow">
              <el-input v-model="value.giftGrow"></el-input>
          </el-form-item> 

          <el-form-item label="商品上架">
            <el-switch 
              v-model="value.publishStatus"
              :active-value="1"
              :inactive-value="0"
              > 
            </el-switch>
          </el-form-item>

          <el-form-item label="商品推荐">
            <span style="margin:0 10px ;">新品</span>
            <el-switch 
              v-model="value.newsStatus"
              :active-value="1"
              :inactive-value="0"
              /> 

            <span style="margin:0 20px ;">推荐</span>
            <el-switch 
              v-model="value.recommendStatus"
              :active-value="1"
              :inactive-value="0"
              /> 
          </el-form-item>

          <el-form-item label="服务保障" prop="type">
            <el-checkbox-group v-model="selectServiceList">
              <el-checkbox :label="1" >1小时达</el-checkbox>
              <el-checkbox :label="2" >满60免运费</el-checkbox>
              <el-checkbox :label="3" >无忧退款</el-checkbox> 
            </el-checkbox-group>
          </el-form-item>

           <!-- <el-form-item label="详情页标题" >
              <el-input v-model="value.detailTitle"></el-input>
          </el-form-item> -->

           <el-form-item label="净含量" >
              <el-input v-model="value.netContent"></el-input>
          </el-form-item>

           <el-form-item label="保存条件" >
              <el-input v-model="value.storageCondition"></el-input>
          </el-form-item>

          <el-form-item label="保质期">
             <el-input placeholder="请输入商品保质期" v-model="value.quality"></el-input>
          </el-form-item>
 
          <el-form-item label="选择优惠方式">
            <el-radio-group v-model="value.reductionType" @change="reductionTypeChange">
                <el-radio-button :label="0">无优惠</el-radio-button>
                <el-radio-button :label="1">特价促销</el-radio-button>
                <el-radio-button :label="2">会员优惠</el-radio-button> 
                <el-radio-button :label="3">限时抢购</el-radio-button>  
              </el-radio-group>
          </el-form-item>


          <el-form-item  v-show="value.reductionType === 1">
              <div>
                开始时间:
                 <el-date-picker
                    v-model="value.reductionStartTime"
                    align="left"
                    type="datetime"
                    placeholder="选择特惠开始时间"
                    :picker-options="pickerOptions">
                  </el-date-picker>
              </div>
               <div style="margin:20px 0;">
                结束时间:
                 <el-date-picker
                    v-model="value.reductionEndTime"
                    align="left"
                    type="datetime"
                    placeholder="选择特惠开始时间"
                    :picker-options="pickerOptions">
                  </el-date-picker>
              </div>
              <div>
                 <span>促销价格</span>
                 <el-input style="width:220px;margin-left:10px;" v-model="value.keywords" placeholder="请输入促销价格"></el-input>
              </div>
          </el-form-item>

          <el-form-item  v-show="value.reductionType === 2">
            <div v-for="item in value.memberPriceList" :key="item.memberLevelId" style="margin-top:10px;">
              {{item.memberLevelName}}: 
              <el-input v-model="item.memberLevelPrice" style="width:200px;margin-left:15px;"></el-input>
            </div>
          </el-form-item>

          <el-form-item  v-show="value.reductionType === 3">
              <el-table
                :data="value.productHomeKillList"
                style="width: 90%">
                <el-table-column 
                  label="数量"
                  align="center"
                  width="100">

                  <template slot-scope="scope">
                    <el-input v-model="scope.row.count"  ></el-input>
                  </template>

                </el-table-column>
                <el-table-column 
                  label="折扣"
                  align="center"
                  width="100">

                  <template slot-scope="scope">
                    <el-input v-model="scope.row.discount"  ></el-input>
                  </template>

                </el-table-column>

                <el-table-column 
                  label="操作"
                  align="center" >
                   <template slot-scope="scope">
                    <el-button type="primary" @click="handleAddHomeKill(scope.row)">添加</el-button>
                    <el-button type="primary" @click="handleRemoveHomeKill(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>

              </el-table>
          </el-form-item>
 
          <el-form-item>
            <el-button type="primary" size="medium" @click="handlePrev">上一步,填写商品信息</el-button>
            <el-button type="primary" size="medium" @click="handleNext">下一步,填写商品属性</el-button>
          </el-form-item> 

     </el-form>    
 
</template>

<script>
import Template from '../../../../../../2-基础/lk-demo/src/components/Template.vue';
  
export default {
  components: { Template },
  name: 'productSaleDetail',
  props:{
      value:Object,
      // 判断是编辑 还是添加
      isUpdate:{
        type:Boolean,
        default:false
      }
  }, 
  data(){
    return { 
      pickerOptions:{
         disabledDate(time) {
            return time.getTime() < Date.now();
          }
      }
    }
  },
  computed:{
    // 处理享有的服务
    selectServiceList:{
      get(){
         
        let list = [];
        // 1 没有任何勾选
        if(this.value.serviceIds === null || this.value.serviceIds === undefined || this.value.serviceIds == ''){
          return list
        }
        // 2 分割
        let idArr = this.value.serviceIds.split(',');
        for(let i=0;i<idArr.length;i++){
          list.push(Number(idArr[i]))
        } 
        return list
      },
      set(newValue){ 
        let serviceIds = '';
        if(newValue != null && newValue.length > 0){ 
          for(let i=0;i<newValue.length;i++){
            serviceIds += newValue[i] + ',';
          } 
          if(serviceIds.endsWith(',')){
            serviceIds = serviceIds.substr(0,serviceIds.length -1 )
          }
          this.value.serviceIds = serviceIds;
        }else{
          this.value.serviceIds = null;
        }
        
      }
    }
  },
  methods:{
    handlePrev(){
      this.$emit('prevStep')
    },
    handleNext(){
      this.$emit('nextStep')
    },
    // 切换优惠方式
    reductionTypeChange(value){
      // console.log(value)
      this.value.reductionType = value  
    },
    // 添加一个 秒杀方案
    handleAddHomeKill(row){
      //1 获取数据
      let productHomeKillList = this.value.productHomeKillList;

      //2 判断
      if(productHomeKillList.length < 1){
        productHomeKillList.push({
            count: row.count,
            discount: row.discount
        })
      }else{
        this.$message.warning('首页秒杀方案只能有1种~')
      }
    
    },
    // 移除一个 秒杀方案
    handleRemoveHomeKill(index){
       //1 获取数据
      let productHomeKillList = this.value.productHomeKillList;

      //2 判断
      if(productHomeKillList.length === 1){
          productHomeKillList.pop()
          productHomeKillList.push({
            count:null,
            discount: null
          })
      }else{
          productHomeKillList.splice(index,1);
      }
 
    }
  }
}
</script>

<style lang="less" scoped>
 
</style>
